<template>
  <div id="topHearder">
    <Row class="titleRow">
      <i-col>
        <span class="left titleCol">用户注册量 <span>{{topData.total}}</span> 个</span>
        <span class="right titleCol">矿企数 <span>{{topData.kqTotal}}</span> 个</span>
        <span class="right titleCol">电厂数 <span>{{topData.dcTotal}}</span> 个</span>
        <span class="right titleCol">场站数 <span>{{topData.czTotal}}</span> 个</span>
      </i-col>
    </Row>
  </div>
</template>

<script>
  import {freightCenterDataUser} from '@api/lightStation/station'
  import _ from 'lodash'

  export default {
    name: 'topHearder',
    data () {
      let topData = {}
      let datas = {topData}
      return datas
    },
    props: {},
    computed: {},
    methods: {
      getTopUserData () {
        freightCenterDataUser({}).then(res => {
          if (+res.data.isSuccess === 1) {
            _.forEach(res.data.data, (item, key) => {
              let val = '' + item
              res.data.data[key] = val.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
            })
            // console.log(res.data.data)
            this.topData = res.data.data
          }
        })
      }
    },
    mounted () {
      this.getTopUserData()
    },
    components: {}
  }
</script>

<style>
  #topHearder .titleRow {
    margin: 0 50px;
    padding: 5px 0;
  }

  #topHearder .titleCol {
    font-size: 13px;
    color: #53ABD8;
    letter-spacing: 0;
  }

  #topHearder .titleCol span {
    letter-spacing: 0;
    font-weight: normal;
    text-align: center;
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(113, 236, 255, 1)), to(rgba(0, 255, 229, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  #topHearder .left {
    float: left;
  }

  #topHearder .right {
    float: right;
    margin: 0 10px;
  }
</style>
